<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" style="display: flex;justify-content: space-between;">
        <span>车辆详情</span>
        <el-button>返回</el-button>
      </div>
      <div class="top-card">

        <img src="" title="" alt="暂无图片" />
        <!-- <el-empty :image-size="150" description="暂无图片"></el-empty> -->

        <div class="top-card-right">
          <div style="font-size: 16px;"><span style="font-weight: 600;">车架号：</span><span>{{ detailForm.vinNo }}</span>
          </div>
          <div><span>品牌/车型/车款：</span><span>{{
            `${detailForm.brandName}/${detailForm.seriesName}/${detailForm.modelName}` }}</span></div>
          <div><span>车辆归属：</span><span>{{ detailForm.carDepotName }}</span></div>
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isForm">
      <el-tab-pane label="保险详情" name="first">

        <el-card class="box-card">
          <div slot="header">
            <span>车辆信息</span>
          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">所属地：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">被保险人：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">行驶证车主：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">租车方名称：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车牌号：</div>
              <el-input disabled v-model="detailForm.carNo" class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">品牌：</div>
              <el-input disabled v-model="detailForm.brandName" class="inp-name-r"></el-input>
            </el-col>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">厂牌型号：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">座位数：</div>
              <el-input disabled v-model="detailForm.seatNumber" class="inp-name-r"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">发动机号：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">排量：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆开票价：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车辆初次登记日期：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">燃料种类：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">保险性质：</div>
              <el-input disabled class="inp-name-r"></el-input>
            </el-col>

          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>交强险信息</span>

          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">租赁禀议保险公司：</div>
              <el-input class="inp-name-r" disabled
                :value="rowManage(detailForm.manageVos, 1).rentInsuranceCompany"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">我司投保供应商：</div>
              <el-input class="inp-name-r" disabled
                :value="rowManage(detailForm.manageVos, 1).insuranceSupplier"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">交强险保单号：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).policyCode }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">交强险公司：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceCompany }}</span>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">交强险公司编码：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceCompanyCode }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">交强险性质：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceType == '1' ? '运营' : '非运营' }}</span>

            </el-col>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">交强险保费：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceAmount }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车船税是否缴纳：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).carTaxStatus == '1' ? '是' : '否' }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">车船税：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).carTax }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">实际交强险开始时间：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).actualBeginTime }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">实际交强险结束时间：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).actualEndTime }}</span>
            </el-col>

          </el-row>

        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>商业险信息</span>

          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">租赁禀议保险公司：</div>
              <el-input class="inp-name-r" disabled
                :value="rowManage(detailForm.manageVos, 1).rentInsuranceCompany"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">我司投保供应商：</div>
              <el-input class="inp-name-r" disabled
                :value="rowManage(detailForm.manageVos, 1).insuranceSupplier"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">商业险保单号：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).policyCode }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">商业险公司：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceCompany }}</span>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">商业险公司编码：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceCompanyCode }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">商业险性质：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceType == '1' ? '运营' : '非运营' }}</span>

            </el-col>

            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">商业险保费：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).insuranceAmount }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">实际交强险开始时间：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).actualBeginTime }}</span>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">实际交强险结束时间：</div>
              <span class="inp-name-r">{{ rowManage(detailForm.manageVos, 1).actualEndTime }}</span>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="24">
              <p>保险套餐:</p>
              <el-table :data="insureDetailList" border>
                <el-table-column v-for=" i in insureCol" :label="i.label" align="center" :prop="i.prop"></el-table-column>
              </el-table>

            </el-col>

          </el-row>

        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>其他保险</span>

          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">其他保险备注：</div>
              <el-input class="inp-name-r" disabled v-model="detailForm.otherInsuranceRemark"></el-input>
            </el-col>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">其他保险保费合计：</div>
              <el-input class="inp-name-r" disabled v-model="detailForm.otherInsuranceSumAmount"></el-input>
            </el-col>

          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <span>付款信息</span>

          </div>
          <el-row>
            <el-col :span="6" class="box-card-inp">
              <div class="inp-name">付款时间：</div>
              <el-input class="inp-name-r" disabled></el-input>
            </el-col>

          </el-row>
        </el-card>

      </el-tab-pane>
      <el-tab-pane label="保险记录" name="second">
        <el-card >
          <div slot="header">
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆交强险总次数：</div>
                <div></div>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆交强险总金额：</div>
                <div></div>
              </el-col>
              
            </el-row>

          </div>
          <el-table v-loading="false" :data="historyList" border>
            <el-table-column label="操作" align="center" width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']">查看</el-button>

              </template>
            </el-table-column>
            <el-table-column v-for=" i in historyCol" :label="i.label" align="center" :prop="i.prop"
              :width="i.width"></el-table-column>

          </el-table>
        </el-card>

        <el-card >
          <div slot="header">
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆商业险总次数：</div>
                <div></div>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆商业险总金额：</div>
                <div></div>
              </el-col>
              
            </el-row>

          </div>
          <el-table v-loading="false" :data="historyList" border>
            <el-table-column label="操作" align="center" width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']">查看</el-button>

              </template>
            </el-table-column>
            <el-table-column v-for=" i in historyCol" :label="i.label" align="center" :prop="i.prop"
              :width="i.width"></el-table-column>

          </el-table>
        </el-card>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
    
<script>

import { getInsuranceDetails } from "@/api/bxgl/insureManageApi.js";
import { getToken } from "@/utils/auth";

export default {
  name: "InsureManageDetails",
  components: {

  },
  computed: {

  },
  data() {
    return {
      isForm:false,
      routeQuery: {},
      activeName: 'first',
      detailForm: {},
      insureDetailList: [
        { insuranceType: "强盗险", coverage: "50", InsuranceCosts: "40" },
        { insuranceType: "车辆损失险", coverage: "100", InsuranceCosts: "100" },

        { insuranceType: "第三者责任险", coverage: "60", InsuranceCosts: "60" },

        { insuranceType: "乘客险保额", coverage: "60", InsuranceCosts: "60" },

        { insuranceType: "司机险保额", coverage: "60", InsuranceCosts: "60" },

        { insuranceType: "划痕险", coverage: "60", InsuranceCosts: "60" },

        { insuranceType: "其他险种", coverage: "60", InsuranceCosts: "60" },
      ],
      insureCol: [
        {
          prop: "insuranceType",
          label: "商业险种",
        },
        {
          prop: "coverage",
          label: "保额/万元",
        },
        {
          prop: "InsuranceCosts",
          label: "保险费用/元",

        },

      ],
      historyList: [],
      historyCol: [
        {
          prop: "carNo",
          label: "交强险保险公司",
        },
        {
          prop: "vinNo",
          label: "交强险保单号",
        },
        {
          prop: "brandName",
          label: "交强险开始时间",

        },

        {
          prop: "modelName",
          label: "交强险结束时间",

        },
        {
          prop: "seriesName",
          label: "交强险费用",
        },
        {

          label: "备注",
          prop: "businessType",
        },
        {
          prop: "seriesName",
          label: "保单时效",
        },
        {

          label: "记录时间",
          prop: "businessType",
        },
       
      
      ],

      dataList: [],

      // 表单参数
      detailForm: {

      },

    };
  },
  watch: {
    // $route: {
    //   handler: function (val, oldVal) {
    //     console.log(val);
    //   },
    //   // 深度观察监听
    //   deep: true
    // }

  },
  computed: {
    rowManage() {
      return (arr, type) => {
        let obj = {}
        let arri = []
        arri = arr.filter((v) => {
          return v.type == type
        })
        return obj = arri[0] || {}
      }
    },
  },
  created() {
    this.routeQuery = this.$route.query
    this.insuranceDetails();
    // this.getBrandNames()

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    insuranceDetails() {
      getInsuranceDetails(this.routeQuery.id).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.detailForm = res.data || {}

         this.isForm = true
        }
      })
    },
}
};
</script>
    
  
<style lang="scss" scoped>
.box-card {
  font-size: 14px;
  margin-bottom: 20px;

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 160px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    img {
      display: block;
      width: 200px;
      height: 160px;
    }

    .top-card-right {
      margin-left: 20px;
      font-size: 14px;
      line-height: 36px;
    }
  }
}

// .form-dialog {
//   ::v-deep .el-dialog__header {
//     padding: 10px 20px;
//     border-bottom: 1px solid #DCDFE6;

//     .el-dialog__headerbtn {
//       top: 15px;
//     }
//   }

// .box-card {
//   margin-bottom: 20px;

//   .card-title {
//     font-size: 16px;
//     position: relative;
//     margin-left: 8px;
//     padding: 0;
//   }

//   .card-title::after {
//     content: '';
//     width: 4px;
//     height: 18px;
//     background-color: aqua;
//     display: block;
//     position: absolute;
//     left: -12px;
//     top: 2px;
//   }
// }

// }
</style>